<template>
	<el-table :data="listData" style="width: 100%">
		<el-table-column label="品牌名" prop="name"></el-table-column>
		<el-table-column label="大类" prop="type"></el-table-column>
		<el-table-column label="小类" prop="classes"></el-table-column>
		<el-table-column label="材质" prop="materials"></el-table-column>
		<el-table-column label="适用规格" prop="scope"></el-table-column>
		<el-table-column label="专属规格" prop="exScope"></el-table-column>
		<el-table-column label="包装规格" prop="packScope"></el-table-column>
		<el-table-column label="口味" prop="taste"></el-table-column>
		<el-table-column label="特殊功用" prop="specialPublic"></el-table-column>
		<el-table-column label="产地" prop="placeOrigin"></el-table-column>
		<el-table-column label="生产日期" prop="dateProduced"></el-table-column>
		<el-table-column label="保质期" prop="exDate"></el-table-column>
		<el-table-column label="特色说明" prop="explain"></el-table-column>
		<el-table-column label="价格" prop="price"></el-table-column>
		<el-table-column label="状态" prop="status"></el-table-column>
		<el-table-column align="right" width="150px">
			<template slot="header" slot-scope="scope">
				<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
			</template>
			<template slot-scope="scope">
				<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">更新</el-button>
				<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
	import {
		getGoods,removeGoods
	} from "@/service/goods.js"
	import { mapActions,mapState,mapMutations } from 'vuex'
	export default {
		async created() {
			this.show()
		},
		data() {
			return {
				tableData: [],
				search: ''
			}
		},
		computed:{
			...mapState("goods",["listData","ruleForm"])
		},
		methods: {
			...mapActions("goods",["show"]),
			...mapMutations("goods",["setRuleForm","setVisible"]),
			handleEdit(index, row) {
				console.log(index, row);
				this.setRuleForm(row);
				this.setVisible(true);
				// console.log(this.ruleForm)
			},
			handleDelete(index, row) {
				removeGoods(row._id)
				this.show()
			}
		},
	}
</script>

<style>
</style>
